<template>
  <div class="container">
    <div class="handle-box">

      <el-row>
<!--        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">-->
<!--          <el-input v-model="keyWord"  placeholder="请输入查询关键字" class="handle-input mr10 searchLabel"/>-->
<!--        </el-col>-->
<!--        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">-->
<!--          <el-button class="searchButton" type="primary"icon="el-icon-search" @click="handleSearch(keyWord)">搜索</el-button>-->
<!--        </el-col>-->

        <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
          <el-button class="addButton" type="primary"icon="el-icon-search" @click="handleParentAdd">添加支部</el-button>
        </el-col>
      </el-row>
      <el-table :data="tableData"  border class="table" ref="multipleTable" header-cell-class-name="table-header"
          @expand-change="getChild"
      >
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-table :data="scope.row.children">
              <el-table-column prop="name"  label="子支部名称" min-width="180" align="center"></el-table-column>
              <el-table-column prop="info"  label="子支部信息" min-width="180" align="center"></el-table-column>
              <el-table-column label="支部操作" min-width="180" align="center" fixed="right">
                <template slot-scope="scope">

                  <el-button type="text" class="editCollegeButton" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑
                  </el-button>
                  <el-button type="text"  icon="el-icon-delete" class="red deleteCollegeButton" @click="handleDelete(scope.$index, scope.row)">删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>

        <el-table-column  label="支部名称" min-width="180" align="center">
          <template slot-scope="scope">
            {{scope.row.name}}
          </template>
        </el-table-column>

        <el-table-column  label="支部信息" min-width="180" align="center">
          <template slot-scope="scope">
            {{scope.row.info}}
          </template>
        </el-table-column>
        <el-table-column label="支部操作" min-width="180" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" class="editCollegeButton" icon="el-icon-plus" @click="handleAdd(scope.$index, scope.row)">添加
            </el-button>
            <el-button type="text" class="editCollegeButton" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑
            </el-button>
            <el-button type="text"  icon="el-icon-delete" class="red deleteCollegeButton" @click="handleDelete(scope.$index, scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.currentPage"
                       :page-size="query.pageSize" :total="query.total" @current-change="handlePageChange"/>
      </div>

      <!-- 添加院系弹出框 -->
      <el-dialog title="添加支部信息" :visible.sync="addDeptVisible" width="30%" >
        <el-form :model="deptForm" label-width="30%">

          <el-row>
            <el-form-item  label="支部名称">
              <el-input v-model="deptForm.name" prefix-icon="el-icon-search" placeholder="请输入支部名称" autocomplete="off"></el-input>
            </el-form-item>
          </el-row>



          <el-row>
            <el-form-item label="支部信息">
              <el-input  prefix-icon="el-icon-search" placeholder="请输入支部编号" v-model="deptForm.info" autocomplete="off" ></el-input>
            </el-form-item>
          </el-row>

          <el-row>
            <el-form-item label="隶属支部编号">
              <el-input disabled placeholder="请输入支部编号"  prefix-icon="el-icon-search" v-model="deptForm.parentId" autocomplete="off" ></el-input>
            </el-form-item>
          </el-row>

          <el-form-item>
            <el-button class="submitButton"  type="primary" @click="addForm">添加</el-button>
            <el-button class="cancelButton" @click="cancel" >取消</el-button>
          </el-form-item>

        </el-form>
      </el-dialog>

      <!-- 编辑院系弹出框 -->
      <el-dialog title="编辑院系信息" :visible.sync="editDeptVisible" width="30%" >
        <el-form :model="deptForm" label-width="30%">
          <el-row>
              <el-form-item label="支部编号">
                <el-input disabled="disabled"  prefix-icon="el-icon-search" placeholder="请输入支部编号" v-model="deptForm.deptId" autocomplete="off" ></el-input>
              </el-form-item>

          </el-row>
          <el-row>
            <el-form-item  label="支部名称">
              <el-input v-model="deptForm.name" prefix-icon="el-icon-search" placeholder="请输入支部名称" autocomplete="off"></el-input>
            </el-form-item>
          </el-row>

          <el-row>
            <el-form-item label="支部信息">
              <el-input  prefix-icon="el-icon-search" placeholder="请输入支部信息" v-model="deptForm.info" autocomplete="off" ></el-input>
            </el-form-item>
          </el-row>

          <el-row>
              <el-form-item  label="隶属支部编号">
                <el-input disabled="disabled" v-model="deptForm.parentId" prefix-icon="el-icon-search" placeholder="请输入隶属支部" autocomplete="off"></el-input>
              </el-form-item>
          </el-row>


          <el-form-item>
            <el-button class="submitButton"  type="primary" @click="editForm">编辑</el-button>
            <el-button class="cancelButton" @click="cancel" >取消</el-button>
          </el-form-item>


        </el-form>
      </el-dialog>

    </div>
  </div>
</template>

<script>

  import {queryDeptByPage,queryDeptById,addDept,updateDept,deleteDept} from '../../api/index'

  import dept from '../../utils/dept'
  export default {
    name: 'DeptManage',
    data(){
      return {
        /*展开行*/
        expandList: [],

        keyWord: '',
        addDeptVisible: false,
        editDeptVisible: false,
        /* 分页 */
        query: {
          total: 10,
          pageSize: 7,
          currentPage: 1,
        },

        deptForm:{
          deptId: '',
          name: '',
          info: '',
          parentId: '',
        },

        tableData: [],
        multipleSelection: [],
        delList: [],
        idx: -1,
        id: -1,
        formLabelWidth: '30%',
        childrenData: []
      }
    },
    created() {
      this.getData();
    },
    mounted(){

    },
    methods: {
      async getData() {

        let current = this.query.currentPage;
        let size = this.query.pageSize;

        const data = await queryDeptByPage({current:current,size:size});

        console.log(data.records);

        this.tableData = data.records;
        this.query.total = data.total;
      },

      // 添加顶级支部操作
      async handleParentAdd() {
        this.addDeptVisible = true;
        this.deptForm.parentId = 0;
      },

      handleAdd(index,row){
        this.addDeptVisible = true;
        this.deptForm.parentId = row.deptId;
      },

      // 编辑操作
      handleEdit(index, row) {
        this.idx = index;
        this.deptForm = row;
        this.editDeptVisible = true;

      },

      // 触发搜索按钮
      handleSearch(keyWord) {
        // 发送查询请求,查询内容为keyWord
        console.log(keyWord)
        // 获取返回数据然后渲染表格
        //this.getData();
      },

      getChild(row, expandedRows){
        if (expandedRows.length > 0) {

        }
      },



      // 删除操作
      async handleDelete(index, row) {
        let deptId = row.deptId;
        await deleteDept({ deptId });
        //渲染
        this.getData();

        this.$message.success("删除成功!");
      },

      // 多选
      handleSelectionChange(val){
        this.multipleSelection = val;
      },
      // 多删
      delAllSelection() {
        // 获得多选删除的id数组
        const length = this.multipleSelection.length;
        if(length === 0){
          this.$message.error(`请选择要删除的对象`);
        }else{

          console.log(this.multipleSelection);
          for(let i = 0;i < this.multipleSelection.length;i++){
            let deptId = this.multipleSelection.deptId;
            let name = this.multipleSelection.name;
            let info = this.multipleSelection.info;
            let parentId = this.multipleSelection.parentId;

            let dept = {
              "deptId": deptId,
              "name": name,
              "info": info,
              "parentId": parentId,
            }
            this.delList.push(dept);
          }
          // 合并数组 发到后台
          console.log(this.deptList);
          //todo 发送删除请求
        }

      },

      // 分页导航
      async handlePageChange(val) {
        let size = this.query.pageSize;

        const data = await queryDeptByPage({ current: val, size: size });

        this.tableData = data.records;
        this.query.total = data.total;
      },


      // 提交表单
      async addForm() {
        // 提交表单


        let name = this.deptForm.name;
        let parentId = this.deptForm.parentId;
        let info = this.deptForm.info;

        console.log(name);
        console.log(parentId);
        console.log(info);

        await addDept({ name, parentId, info });
        // 发送请求,刷新数据
        this.getData();

        this.$message.success("提交成功!");
        this.addDeptVisible = false;
        this.editDeptVisible = false;
      },
      async editForm() {
        let name = this.deptForm.name;
        let parentId = this.deptForm.parentId;
        let info = this.deptForm.info;
        let deptId = this.deptForm.deptId;

        console.log(name);
        console.log(parentId);
        console.log(info);
        console.log(deptId);

        await updateDept({ deptId, name, parentId, info });

        //更新
        this.getData();

        this.$message.success("更新成功!");
        this.addDeptVisible = false;
        this.editDeptVisible = false;
      },


      // 取消表单
      cancel(){
        this.addDeptVisible = false;
        this.editDeptVisible = false;
      },

      //返回索引
      indexMethod(index) {
        return (this.query.currentPage - 1) * this.query.pageSize + index + 1;
      },

    },
    watch: {

      addDeptVisible(){
        if(this.addDeptVisible === false){
          this.deptForm = {};
        }
      },
      editDeptVisible(){
        if(this.editDeptVisible === false){
          this.deptForm = {};
        }
      }
    }
  };
</script>

<style scoped>
  .handle-box {
    margin-bottom: 20px;
  }


  .handle-input {
    width: 300px;
    display: inline-block;
  }


  .table {
    margin-top: 3%;
    width: 100%;
    font-size: 14px;
  }

  .red {
    color: #ff0000;
  }

  .mr10 {
    margin-right: 10px;
  }

  /* 按钮大小 */
  .editCollegeButton,.deleteCollegeButton{
    font-size: 14px;
  }

  .searchLabel{
    margin-left: 0%;
  }

  .searchButton{
    margin-left: -20%;
  }

</style>
